- DomScan MCP Server
DomScan MCP Server
.icon-wrapper { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon-wrapper svg { width: 100%; height: 100%; } .icon-wrapper.w-4 { width: 1rem; height: 1rem; } .icon-wrapper.w-6 { width: 1.5rem; height: 1.5rem; } .icon-wrapper.w-8 { width: 2rem; height: 2rem; } .icon-wrapper.h-4 { width: 1rem; height: 1rem; } .icon-wrapper.h-6 { width: 1.5rem; height: 1.5rem; } .icon-wrapper.h-8 { width: 2rem; height: 2rem; }
/* For feature cards that expect a .icon child with font-size sizing */ .feature-card .icon svg, .api-card-icon svg { width: 1em; height: 1em; }
/* CSS Variables - Design System */
:root {
--orange-500: #f97316;
--orange-600: #ea580c;
--orange-400: #fb923c;
--slate-900: #0f172a;
--slate-800: #1e293b;
--slate-700: #334155;
--slate-600: #475569;
--slate-500: #64748b;
--slate-400: #94a3b8;
--slate-300: #cbd5e1;
--slate-200: #e2e8f0;
--slate-100: #f1f5f9;
--slate-50: #f8fafc;
--green-500: #22c55e;
--green-400: #4ade80;
--red-500: #ef4444;
--font-mono: 'IBM Plex Mono', 'SF Mono', Monaco, 'Courier New', monospace;
--font-sans: 'IBM Plex Mono', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-sans);
line-height: 1.7;
color: var(--slate-800);
background: #fff;
}
/* Mobile touch optimizations */
a, button, [role="button"], input[type="submit"], input[type="button"] {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* ===== HEADER ===== */
.header {
background: var(--slate-800);
color: white;
padding: 0.875rem 2rem;
border-bottom: 2px solid var(--orange-500);
position: sticky;
top: 0;
z-index: 1000;
}
.header-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 1.4rem;
font-weight: 800;
text-decoration: none;
color: white;
letter-spacing: -0.02em;
}
.logo-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.nav {
display: flex;
align-items: center;
gap: 0.25rem;
}
.nav a {
color: var(--slate-300);
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
transition: all 0.2s ease;
}
.nav a:hover {
color: white;
background: rgba(255,255,255,0.08);
}
.nav-auth {
display: flex;
align-items: center;
margin-left: 0.75rem;
padding-left: 0.75rem;
border-left: 1px solid var(--slate-700);
}
.btn-signin {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
background: var(--orange-500);
color: white;
font-size: 0.875rem;
font-weight: 600;
border-radius: 6px;
text-decoration: none;
transition: all 0.2s;
}
.btn-signin:hover {
background: var(--orange-600);
transform: translateY(-1px);
}
/* ===== USER MENU ===== */
.user-menu {
position: relative;
}
.user-avatar-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.75rem 0.35rem 0.35rem;
background: rgba(255,255,255,0.08);
border-radius: 24px;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.12);
color: white;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
}
.user-avatar-btn:hover {
background: rgba(255,255,255,0.15);
border-color: rgba(255,255,255,0.2);
}
.user-avatar-btn:active {
transform: scale(0.98);
}
.user-avatar-btn::after {
content: '';
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid rgba(255,255,255,0.6);
margin-left: 0.25rem;
transition: transform 0.2s ease;
}
.user-avatar-btn.open::after {
transform: rotate(180deg);
}
.user-avatar-btn img {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.3);
object-fit: cover;
}
.user-avatar-btn .placeholder-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--orange-400) 0%, var(--orange-600) 100%);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.75rem;
color: white;
border: 2px solid rgba(255,255,255,0.2);
}
/* User Dropdown */
.user-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
min-width: 240px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px) scale(0.96);
transform-origin: top right;
transition: all 0.2s ease;
z-index: 1001;
overflow: hidden;
}
.user-dropdown.show {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.user-dropdown-header {
padding: 1rem 1.25rem;
background: var(--slate-50);
border-bottom: 1px solid var(--slate-200);
}
.user-dropdown-name {
font-weight: 600;
color: var(--slate-900);
font-size: 0.95rem;
line-height: 1.3;
}
.user-dropdown-email {
color: var(--slate-500);
font-size: 0.8rem;
margin-top: 0.15rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-dropdown-links {
padding: 0.5rem;
}
.user-dropdown-links a,
.user-dropdown-links button {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.75rem 1rem;
color: var(--slate-600);
text-decoration: none;
font-size: 0.9rem;
text-align: left;
background: none;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
font-weight: 500;
font-family: var(--font-sans);
}
.user-dropdown-links a svg,
.user-dropdown-links button svg {
flex-shrink: 0;
opacity: 0.6;
}
.user-dropdown-links a:hover,
.user-dropdown-links button:hover {
background: var(--slate-100);
color: var(--slate-900);
}
.user-dropdown-links a:hover svg,
.user-dropdown-links button:hover svg {
opacity: 1;
}
.user-dropdown-links .logout-btn {
color: var(--red-500);
}
.user-dropdown-links .logout-btn svg {
opacity: 0.7;
}
.user-dropdown-links .logout-btn:hover {
background: var(--slate-100);
color: var(--red-500);
}
.user-dropdown-links .logout-btn:hover svg {
opacity: 1;
}
/* Support notification badge */
.support-notification-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--orange-500);
color: white;
border-radius: 100px;
font-size: 0.7rem;
font-weight: 700;
margin-left: 0.5rem;
}
/* ===== LANGUAGE SELECTOR ===== */
.language-selector {
position: relative;
margin-left: 0.5rem;
}
.lang-btn {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.6rem;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 6px;
color: var(--slate-300);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: var(--font-sans);
}
.lang-btn:hover {
background: rgba(255,255,255,0.15);
color: white;
}
.lang-flag {
font-size: 0.85rem;
line-height: 1;
}
.lang-arrow {
opacity: 0.6;
transition: transform 0.2s ease;
}
.language-selector:hover .lang-arrow,
.language-selector.open .lang-arrow {
transform: rotate(180deg);
}
.lang-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.2s ease;
z-index: 1001;
overflow: hidden;
padding: 0.75rem;
display: grid;
grid-template-columns: repeat(4, minmax(90px, 1fr));
gap: 0.25rem;
min-width: 400px;
}
.language-selector:hover .lang-dropdown,
.language-selector.open .lang-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.lang-option {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.5rem 0.25rem;
color: #334155;
text-decoration: none;
font-size: 0.7rem;
border-radius: 8px;
transition: all 0.15s ease;
text-align: center;
}
.lang-option .lang-flag {
font-size: 0.65rem;
font-weight: 700;
line-height: 1;
background: #e2e8f0;
color: #475569;
padding: 0.2rem 0.35rem;
border-radius: 3px;
letter-spacing: 0.02em;
}
/* Non-active language options - hover state */
.lang-option:not(.active):hover {
background: #f1f5f9;
color: #0f172a;
}
.lang-option:not(.active):hover .lang-flag {
background: #cbd5e1;
}
/* Active (current) language option */
.lang-option.active {
background: var(--orange-500);
color: white;
}
.lang-option.active .lang-flag {
background: rgba(255,255,255,0.3);
color: white;
}
.lang-option.active:hover {
background: var(--orange-600);
color: white;
}
.lang-option.active:hover .lang-flag {
background: rgba(255,255,255,0.3);
color: white;
}
.lang-option .lang-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80px;
}
.lang-check {
display: none;
}
.lang-option.active .lang-check {
display: block;
position: absolute;
top: 4px;
right: 4px;
}
.lang-option {
position: relative;
}
@media (max-width: 768px) {
.language-selector {
display: none;
}
}
/* ===== LANGUAGE SUGGESTION BANNER ===== */
.lang-suggest-banner {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
padding: 0.875rem 1rem;
display: flex;
align-items: center;
gap: 0.875rem;
z-index: 1000;
max-width: 320px;
font-size: 0.875rem;
transform: translateY(120%);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.lang-suggest-banner.show {
transform: translateY(0);
opacity: 1;
}
.lang-suggest-flag {
font-size: 0.7rem;
font-weight: 700;
background: var(--orange-500);
color: white;
padding: 0.25rem 0.4rem;
border-radius: 4px;
flex-shrink: 0;
}
.lang-suggest-text {
flex: 1;
color: var(--slate-700);
line-height: 1.4;
}
.lang-suggest-actions {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}
.lang-suggest-switch {
background: var(--orange-500);
color: white;
border: none;
padding: 0.4rem 0.75rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
font-family: var(--font-sans);
text-decoration: none;
}
.lang-suggest-switch:hover {
background: var(--orange-600);
text-decoration: none;
}
.lang-suggest-dismiss {
background: transparent;
border: none;
color: var(--slate-400);
padding: 0.4rem;
cursor: pointer;
font-size: 1rem;
line-height: 1;
transition: color 0.2s;
}
.lang-suggest-dismiss:hover {
color: var(--slate-600);
}
@media (max-width: 480px) {
.lang-suggest-banner {
left: 1rem;
right: 1rem;
bottom: 1rem;
max-width: none;
}
}
/* ===== HAMBURGER MENU ===== */
.hamburger-btn {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 44px;
height: 44px;
background: transparent;
border: none;
cursor: pointer;
padding: 10px 8px;
z-index: 1001;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.hamburger-btn span {
width: 24px;
height: 2px;
background: white;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: center;
}
.hamburger-btn.open span:nth-child(1) {
transform: rotate(45deg) translateY(7px) translateX(0px);
}
.hamburger-btn.open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.hamburger-btn.open span:nth-child(3) {
transform: rotate(-45deg) translateY(-7px) translateX(0px);
}
/* Mobile Menu Overlay */
.mobile-menu-overlay {
display: none;
position: fixed;
top: 60px; /* Start below header */
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
z-index: 998; /* Below mobile menu and header */
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
backdrop-filter: blur(4px);
}
.mobile-menu-overlay.show {
opacity: 1;
pointer-events: auto;
}
/* Mobile Menu Panel */
.mobile-menu {
display: none;
position: fixed;
top: 60px; /* Start below header to not cover hamburger button */
left: -300px;
width: 300px;
height: calc(100vh - 60px);
background: var(--slate-900);
z-index: 999; /* Below header z-index */
padding: 1rem 0 2rem 0;
transition: left 0.3s ease, visibility 0.3s ease;
overflow-y: auto;
visibility: hidden;
}
.mobile-menu.show {
left: 0;
visibility: visible;
}
.mobile-menu a {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--slate-300);
text-decoration: none;
padding: 1rem 1.5rem;
font-weight: 500;
font-size: 1rem;
border-bottom: 1px solid var(--slate-800);
transition: all 0.2s ease;
}
.mobile-menu a:hover {
background: var(--slate-800);
color: white;
}
.mobile-menu-divider {
height: 1px;
background: var(--slate-700);
margin: 0.5rem 1.5rem;
}
.mobile-menu-user {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--slate-800);
display: none;
}
.mobile-menu-user.show {
display: block;
}
.mobile-menu-user-info {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.mobile-menu-user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 1rem;
}
.mobile-menu-user-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.mobile-menu-user-details {
flex: 1;
min-width: 0;
}
.mobile-menu-user-name {
color: white;
font-weight: 600;
font-size: 0.95rem;
}
.mobile-menu-user-email {
color: var(--slate-500);
font-size: 0.8rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-menu-user-links a {
padding: 0.75rem 0;
border-bottom: none;
color: var(--slate-400);
font-size: 0.9rem;
}
.mobile-menu-user-links a:hover {
background: transparent;
color: var(--orange-400);
}
.mobile-menu-user-links .logout-link {
color: var(--red-500);
}
.mobile-menu-user-links .logout-link:hover {
color: var(--red-500);
}
/* Mobile Menu CTA (signed-out state) */
.mobile-menu-cta {
display: none;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--slate-800);
text-align: center;
}
.mobile-menu-cta.show {
display: block;
}
.mobile-cta-button {
display: flex !important;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.875rem 1.5rem !important;
background: var(--orange-500) !important;
color: white !important;
font-size: 1rem;
font-weight: 700;
border-radius: 8px;
text-decoration: none !important;
border-bottom: none !important;
}
.mobile-cta-button:hover {
background: var(--orange-600) !important;
}
.mobile-cta-subtitle {
margin-top: 0.5rem;
color: var(--slate-500);
font-size: 0.8rem;
}
/* Mobile header buttons - hidden on desktop, JS controls on mobile */
.btn-signup-mobile {
display: none !important;
align-items: center;
padding: 0.5rem 0.875rem;
background: var(--orange-500);
color: white;
font-size: 0.8rem;
font-weight: 600;
border-radius: 6px;
text-decoration: none;
white-space: nowrap;
transition: all 0.2s;
}
.btn-signup-mobile:hover {
background: var(--orange-600);
}
.btn-dashboard-mobile {
display: none !important;
align-items: center;
padding: 0.5rem 0.875rem;
background: rgba(255,255,255,0.08);
color: var(--slate-300);
font-size: 0.8rem;
font-weight: 500;
border-radius: 6px;
text-decoration: none;
white-space: nowrap;
transition: all 0.2s;
}
.btn-dashboard-mobile:hover {
background: rgba(255,255,255,0.15);
color: white;
}
/* ===== GENERAL LAYOUT ===== */
.hero {
background: var(--slate-900);
color: white;
padding: 4.5rem 2rem;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(249, 115, 22, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(249, 115, 22, 0.03) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
.hero-content {
position: relative;
z-index: 1;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(249, 115, 22, 0.1);
border: 1px solid rgba(249, 115, 22, 0.2);
padding: 0.4rem 1rem;
border-radius: 100px;
margin-bottom: 1.25rem;
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--orange-400);
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
margin-bottom: 0.75rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
letter-spacing: -0.03em;
}
.hero h1 span {
color: var(--orange-500);
}
.hero p {
font-size: 1.15rem;
color: var(--slate-400);
max-width: 800px;
margin: 0 auto 2rem;
line-height: 1.7;
}
.badge {
display: inline-block;
background: rgba(255,255,255,0.2);
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 3rem 2rem;
}
h2 {
font-size: 1.75rem;
color: var(--slate-900);
margin-bottom: 1rem;
margin-top: 3rem;
letter-spacing: -0.02em;
}
h2:first-child { margin-top: 0; }
h3 {
color: var(--slate-700);
margin-top: 1.5rem;
margin-bottom: 0.75rem;
font-size: 1.1rem;
}
p { margin-bottom: 1rem; color: var(--slate-600); }
code {
background: var(--slate-100);
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-size: 0.875rem;
font-family: var(--font-mono);
}
pre {
background: var(--slate-900);
color: var(--slate-300);
padding: 1.25rem;
border-radius: 10px;
overflow-x: auto;
margin: 1.5rem 0;
font-size: 0.875rem;
font-family: var(--font-mono);
}
pre code {
background: none;
padding: 0;
color: inherit;
}
.card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
margin-bottom: 1.5rem;
border: 1px solid var(--slate-200);
}
.card h2 {
margin-top: 0;
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin: 1.5rem 0;
}
@media (max-width: 800px) {
.features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
.features-grid { grid-template-columns: 1fr; }
}
.feature-card {
background: var(--slate-50);
padding: 1.25rem;
border-radius: 12px;
border: 1px solid var(--slate-200);
text-align: center;
transition: all 0.2s;
}
.feature-card:hover {
border-color: var(--orange-500);
transform: translateY(-2px);
}
.feature-card .icon {
font-size: 2rem;
margin-bottom: 0.5rem;
color: var(--orange-500);
}
.feature-card h3 {
color: var(--slate-900);
margin: 0 0 0.5rem 0;
font-size: 1rem;
}
.feature-card p {
color: var(--slate-500);
font-size: 0.9rem;
margin: 0;
}
.try-box {
background: var(--slate-50);
border: 2px solid var(--orange-400);
border-radius: 12px;
padding: 1.5rem;
margin: 2rem 0;
}
.try-box-title {
font-weight: 700;
color: var(--orange-600);
margin-bottom: 0.75rem;
font-size: 1.1rem;
}
.try-box code {
display: block;
background: var(--slate-900);
color: var(--slate-300);
padding: 1rem;
border-radius: 8px;
overflow-x: auto;
font-size: 0.875rem;
}
.highlight {
background: linear-gradient(135deg, var(--orange-500) 0%, var(--orange-600) 100%);
color: white;
padding: 1.5rem;
border-radius: 10px;
margin: 1.5rem 0;
}
.highlight h3 {
color: white;
margin-top: 0;
}
.highlight p {
color: rgba(255,255,255,0.9);
margin: 0;
}
.endpoint {
background: var(--slate-50);
padding: 1.25rem;
border-radius: 10px;
margin: 1rem 0;
border: 1px solid var(--slate-200);
}
.endpoint-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.method {
font-weight: 700;
font-size: 0.7rem;
font-family: var(--font-mono);
padding: 0.25rem 0.5rem;
border-radius: 4px;
text-transform: uppercase;
}
.method-get { background: #dcfce7; color: #166534; }
.method-post { background: #dbeafe; color: #1e40af; }
.endpoint-path {
font-family: var(--font-mono);
font-weight: 600;
color: var(--slate-800);
}
.endpoint-desc {
color: var(--slate-500);
font-size: 0.9rem;
}
ul { margin-left: 1.25rem; margin-top: 0.75rem; }
li { margin-bottom: 0.5rem; color: var(--slate-600); }
a { color: var(--orange-600); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
.faq-section {
margin: 3rem 0;
}
.faq-item {
border-bottom: 1px solid var(--slate-200);
padding: 1.5rem 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
font-weight: 700;
color: var(--slate-900);
font-size: 1.1rem;
margin-bottom: 0.75rem;
}
.faq-a {
color: var(--slate-600);
margin: 0;
}
.cta-box {
background: linear-gradient(135deg, var(--orange-500) 0%, var(--orange-600) 100%);
color: white;
padding: 2.5rem;
border-radius: 16px;
text-align: center;
margin: 3rem 0;
}
.cta-box h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: white;
}
.cta-box p {
color: rgba(255,255,255,0.9);
margin-bottom: 1.5rem;
}
.cta-btn {
display: inline-block;
background: white;
color: var(--orange-600);
padding: 0.875rem 2rem;
border-radius: 8px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
transition: all 0.2s;
}
.cta-btn:hover {
background: var(--slate-50);
text-decoration: none;
transform: translateY(-1px);
}
/* Tool form styles */
.tool-form {
display: grid;
gap: 1rem;
margin-top: 1.5rem;
}
.tool-input {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.tool-input label {
font-weight: 600;
color: var(--slate-900);
}
.tool-input input {
padding: 0.75rem 1rem;
border-radius: 8px;
border: 1px solid var(--slate-200);
font-size: 1rem;
transition: border-color 0.2s;
}
.tool-input input:focus {
outline: none;
border-color: var(--orange-500);
}
.tool-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
}
.tool-actions button {
background: var(--orange-500);
border: none;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.tool-actions button:hover {
background: var(--orange-600);
transform: translateY(-1px);
}
.tool-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
color: var(--slate-600);
}
.tool-results {
background: var(--slate-900);
color: var(--slate-300);
border-radius: 12px;
padding: 1.5rem;
margin-top: 1.5rem;
font-family: var(--font-mono);
font-size: 0.9rem;
overflow-x: auto;
min-height: 140px;
white-space: pre-wrap;
}
.tool-hint {
color: var(--slate-500);
font-size: 0.9rem;
}
/* ===== FOOTER ===== */
.footer {
background: var(--slate-900);
color: var(--slate-400);
padding: 3.5rem 2rem 2.5rem;
}
.footer a {
color: var(--slate-300);
text-decoration: none;
transition: color 0.2s ease;
}
.footer a:hover {
color: var(--orange-400);
text-decoration: none;
}
.footer-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr repeat(4, 1fr);
gap: 2rem;
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 1.5rem;
font-weight: 800;
color: white;
text-decoration: none;
}
.footer-logo .logo-icon {
width: 32px;
height: 32px;
}
.footer-brand p {
color: var(--slate-500);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
.footer-social {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.footer-column h4 {
color: white;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.footer-column ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.footer-column a {
font-size: 0.9rem;
}
.footer-meta {
max-width: 1200px;
margin: 2.5rem auto 0;
padding-top: 1.5rem;
border-top: 1px solid var(--slate-800);
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: space-between;
color: var(--slate-500);
font-size: 0.85rem;
}
.footer-meta a {
color: var(--orange-400);
}
.footer-legal {
display: flex;
gap: 1rem;
}
.footer-legal a {
color: var(--slate-500);
text-decoration: none;
transition: color 0.15s;
}
.footer-legal a:hover {
color: var(--orange-400);
}
/* ===== MOBILE RESPONSIVENESS ===== */
/* Mobile Navigation */
@media (max-width: 768px) {
.header {
padding: 0.75rem 1rem;
}
.header-inner {
flex-wrap: nowrap;
gap: 0.75rem;
justify-content: space-between;
}
.hamburger-btn {
display: flex;
order: -1;
}
.logo {
font-size: 1.25rem;
flex: 1;
text-align: center;
}
.nav {
display: none;
}
.nav-auth {
flex-shrink: 0;
border: none;
padding: 0;
margin: 0;
}
/* Hide desktop auth UI on mobile - replaced by mobile buttons */
.btn-signin, .user-menu {
display: none !important;
}
/* Allow JS to control mobile header buttons */
.btn-signup-mobile, .btn-dashboard-mobile {
display: none !important;
}
.btn-signup-mobile[style*="inline-flex"] {
display: inline-flex !important;
}
.btn-dashboard-mobile[style*="inline-flex"] {
display: inline-flex !important;
}
.mobile-menu-overlay,
.mobile-menu {
display: block;
}
}
/* Hero sections */
@media (max-width: 600px) {
.hero {
padding: 3rem 1.25rem;
}
.hero-badge {
font-size: 0.7rem;
padding: 0.3rem 0.75rem;
}
.hero h1 {
font-size: 1.75rem;
line-height: 1.3;
}
.hero p {
font-size: 1rem;
}
}
/* Container padding */
@media (max-width: 600px) {
.container {
padding: 1.5rem 1rem;
}
h2 {
font-size: 1.4rem;
margin-top: 2rem;
}
}
/* Code blocks - prevent overflow */
pre, code {
word-break: break-word;
}
@media (max-width: 600px) {
pre {
padding: 1rem;
font-size: 0.8rem;
border-radius: 8px;
}
code {
font-size: 0.8rem;
}
.try-box code {
font-size: 0.75rem;
padding: 0.75rem;
white-space: pre-wrap;
word-break: break-all;
}
}
/* Cards */
@media (max-width: 600px) {
.card {
padding: 1.25rem;
border-radius: 10px;
}
}
/* Endpoint boxes */
@media (max-width: 600px) {
.endpoint {
padding: 1rem;
}
.endpoint-header {
flex-wrap: wrap;
gap: 0.5rem;
}
.endpoint-path {
font-size: 0.85rem;
word-break: break-all;
}
}
/* Footer */
@media (max-width: 900px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 600px) {
.footer {
padding: 2.5rem 1rem 2rem;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.footer-meta {
flex-direction: column;
align-items: flex-start;
}
}
/* CTA box */
@media (max-width: 600px) {
.cta-box {
padding: 1.5rem 1rem;
border-radius: 12px;
}
.cta-box h3 {
font-size: 1.25rem;
}
.cta-btn {
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
}
}
/* Highlight boxes */
@media (max-width: 600px) {
.highlight {
padding: 1rem;
border-radius: 8px;
}
}
.mcp-container {
max-width: 900px;
margin: 0 auto;
padding: 2rem;
}
.mcp-hero {
background: var(--slate-900);
color: white;
padding: 4.5rem 2rem 3.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.mcp-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(249, 115, 22, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(249, 115, 22, 0.03) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
.mcp-hero-content {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
}
.mcp-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.2);
padding: 0.4rem 1rem;
border-radius: 100px;
margin-bottom: 1.25rem;
font-family: var(--font-mono);
font-size: 0.8rem;
color: #4ade80;
}
.mcp-hero h1 {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
margin-bottom: 0.75rem;
letter-spacing: -0.03em;
}
.mcp-hero h1 span {
color: var(--orange-500);
}
.mcp-hero p {
font-size: 1.15rem;
color: var(--slate-400) !important;
margin: 0 0 1.5rem 0;
max-width: 650px;
margin-left: auto;
margin-right: auto;
line-height: 1.7;
}
.mcp-hero .endpoint-box {
background: rgba(0,0,0,0.3);
border: 1px solid var(--slate-700);
border-radius: 10px;
padding: 0.875rem 1.5rem;
font-family: var(--font-mono);
font-size: 1rem;
display: inline-block;
color: var(--orange-400);
}
.platform-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 2rem 0;
}
@media (max-width: 800px) {
.platform-grid { grid-template-columns: 1fr; }
.mcp-hero {
padding: 3rem 1.25rem 2.5rem;
}
.mcp-hero-badge {
font-size: 0.7rem;
padding: 0.3rem 0.75rem;
}
.mcp-hero h1 {
font-size: 1.75rem;
}
.mcp-hero p {
font-size: 1rem;
}
.mcp-hero .endpoint-box {
font-size: 0.85rem;
padding: 0.75rem 1rem;
}
.mcp-container {
padding: 1.5rem 1.25rem;
}
}
.platform-card {
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 1.5rem;
text-align: center;
transition: all 0.2s;
cursor: pointer;
}
.platform-card:hover {
border-color: #f97316;
transform: translateY(-2px);
}
.platform-card.active {
border-color: #f97316;
background: #fff7ed;
}
.platform-card .icon {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.platform-card h3 {
margin: 0 0 0.25rem 0;
color: #0f172a;
}
.platform-card p {
margin: 0;
font-size: 0.85rem;
color: #64748b;
}
.setup-section {
background: white;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 2rem;
margin: 2rem 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.setup-section h2 {
color: #0f172a;
margin: 0 0 1rem 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
.setup-section h2 .icon {
font-size: 1.5rem;
}
.step {
display: flex;
gap: 1rem;
margin: 1.5rem 0;
align-items: flex-start;
}
.step-number {
background: linear-gradient(135deg, #f97316, #ea580c);
color: white;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex-shrink: 0;
}
.step-content {
flex: 1;
}
.step-content h4 {
margin: 0 0 0.5rem 0;
color: #0f172a;
}
.step-content p {
margin: 0;
color: #475569;
}
.config-block {
background: #1e293b;
color: #e2e8f0;
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
overflow-x: auto;
font-family: "IBM Plex Mono", "SF Mono", Monaco, monospace;
font-size: 0.875rem;
}
.config-block .comment {
color: #64748b;
}
.config-block .key {
color: #7dd3fc;
}
.config-block .string {
color: #86efac;
}
.menu-path {
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 0.75rem 1rem;
margin: 0.5rem 0;
font-family: "IBM Plex Mono", "SF Mono", Monaco, monospace;
font-size: 0.9rem;
color: #334155;
}
.menu-path .arrow {
color: #94a3b8;
margin: 0 0.5rem;
}
.tip-box {
background: #f0fdf4;
border-left: 4px solid #22c55e;
padding: 1rem 1.25rem;
margin: 1rem 0;
border-radius: 0 8px 8px 0;
}
.tip-box strong {
color: #166534;
}
.warning-box {
background: #fef3c7;
border-left: 4px solid #f59e0b;
padding: 1rem 1.25rem;
margin: 1rem 0;
border-radius: 0 8px 8px 0;
}
.warning-box strong {
color: #92400e;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 1.5rem 0;
}
@media (max-width: 700px) {
.tools-grid { grid-template-columns: 1fr; }
}
.tool-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 1.25rem;
}
.tool-card h4 {
color: #0f172a;
margin: 0 0 0.5rem 0;
font-family: "IBM Plex Mono", "SF Mono", Monaco, monospace;
}
.tool-card p {
color: #64748b;
font-size: 0.9rem;
margin: 0;
}
.examples-section {
background: #f8fafc;
border-radius: 12px;
padding: 1.5rem;
margin: 2rem 0;
}
.examples-section h3 {
margin: 0 0 1rem 0;
color: #0f172a;
}
.example-item {
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 1rem;
margin: 0.75rem 0;
}
.example-item .query {
font-weight: 600;
color: #0f172a;
margin-bottom: 0.5rem;
}
.example-item .result {
color: #64748b;
font-size: 0.9rem;
}
.cta-section {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
color: white;
padding: 2.5rem;
border-radius: 16px;
text-align: center;
margin: 2rem 0;
}
.cta-section h3 {
font-size: 1.5rem;
margin-bottom: 0.75rem;
color: white;
}
.cta-section p {
color: rgba(255,255,255,0.9);
margin-bottom: 1.5rem;
}
.cta-btn {
display: inline-block;
background: white;
color: #ea580c;
padding: 0.875rem 2rem;
border-radius: 8px;
text-decoration: none;
font-weight: 700;
}
.cta-btn:hover {
background: #fff7ed;
}
/* ===== MOBILE RESPONSIVENESS ===== */
@media (max-width: 600px) {
body {
overflow-x: hidden; /* Prevent horizontal scroll from negative margins */
}
.mcp-container {
padding: 1rem;
overflow-x: hidden;
}
.mcp-hero {
padding: 2rem 1rem;
margin: 0 0 1.5rem 0; /* Remove negative margins that cause overflow */
border-radius: 0;
}
.mcp-hero h1 {
font-size: 1.75rem;
}
.mcp-hero p {
font-size: 1rem;
}
.mcp-hero .endpoint-box {
font-size: 0.8rem;
padding: 0.75rem;
word-break: break-all;
}
.platform-grid {
gap: 0.75rem;
}
.platform-card {
padding: 1rem;
}
.platform-card .icon {
font-size: 2rem;
}
.platform-card h3 {
font-size: 1rem;
}
.setup-section {
padding: 1.25rem;
margin: 1.5rem 0;
border-radius: 12px;
}
.setup-section h2 {
font-size: 1.25rem;
flex-wrap: wrap;
}
.setup-section h2 .icon {
font-size: 1.25rem;
}
.step {
flex-direction: column;
gap: 0.75rem;
}
.step-number {
width: 28px;
height: 28px;
font-size: 0.9rem;
}
.step-content h4 {
font-size: 1rem;
}
.step-content p {
font-size: 0.9rem;
}
.config-block {
font-size: 0.7rem;
padding: 0.875rem;
white-space: pre-wrap;
word-break: break-all;
}
.menu-path {
font-size: 0.7rem;
padding: 0.5rem 0.75rem;
word-break: break-all;
overflow-wrap: anywhere;
line-height: 1.6;
}
.menu-path .arrow {
margin: 0 0.2rem;
}
.tip-box, .warning-box {
padding: 0.875rem 1rem;
font-size: 0.9rem;
}
.tools-grid {
gap: 0.75rem;
}
.tool-card {
padding: 1rem;
}
.tool-card h4 {
font-size: 0.9rem;
}
.tool-card p {
font-size: 0.85rem;
}
.examples-section {
padding: 1rem;
}
.examples-section h3 {
font-size: 1.1rem;
}
.example-item {
padding: 0.875rem;
}
.example-item .query {
font-size: 0.9rem;
}
.example-item .result {
font-size: 0.8rem;
}
.cta-section {
padding: 1.5rem 1rem;
border-radius: 12px;
}
.cta-section h3 {
font-size: 1.25rem;
}
.cta-section p {
font-size: 0.9rem;
}
.cta-btn {
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
}
}
<div class="language-selector" data-current-lang="en">
<button class="lang-btn" aria-label="Select language" aria-haspopup="true">
<span class="lang-flag">EN</span>
<svg class="lang-arrow" width="12" height="12" viewBox="0 0 12 12">
<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
</svg>
</button>
<div class="lang-dropdown">
<a href="/" class="lang-option active" hreflang="en" data-lang="en">
<span class="lang-flag">EN</span>
<span class="lang-name">English</span>
<svg class="lang-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
</a>
<a href="/es" class="lang-option" hreflang="es" data-lang="es">
<span class="lang-flag">ES</span>
<span class="lang-name">Espanol</span>
</a>
<a href="/de" class="lang-option" hreflang="de" data-lang="de">
<span class="lang-flag">DE</span>
<span class="lang-name">Deutsch</span>
</a>
<a href="/fr" class="lang-option" hreflang="fr" data-lang="fr">
<span class="lang-flag">FR</span>
<span class="lang-name">Francais</span>
</a>
<a href="/pt" class="lang-option" hreflang="pt" data-lang="pt">
<span class="lang-flag">PT</span>
<span class="lang-name">Portugues</span>
</a>
<a href="/ja" class="lang-option" hreflang="ja" data-lang="ja">
<span class="lang-flag">JP</span>
<span class="lang-name">Nihongo</span>
</a>
<a href="/zh" class="lang-option" hreflang="zh-Hans" data-lang="zh">
<span class="lang-flag">CN</span>
<span class="lang-name">Zhongwen</span>
</a>
<a href="/it" class="lang-option" hreflang="it" data-lang="it">
<span class="lang-flag">IT</span>
<span class="lang-name">Italiano</span>
</a>
<a href="/ko" class="lang-option" hreflang="ko" data-lang="ko">
<span class="lang-flag">KR</span>
<span class="lang-name">Hangugeo</span>
</a>
<a href="/nl" class="lang-option" hreflang="nl" data-lang="nl">
<span class="lang-flag">NL</span>
<span class="lang-name">Nederlands</span>
</a>
</div>
</div>
<div class="nav-auth" id="nav-auth">
<a href="/login" class="btn-signin" id="signin-btn" style="display: none;">Sign In</a>
<div class="user-menu" id="user-menu" style="display: none;">
<button class="user-avatar-btn" id="user-avatar-btn">
<span class="placeholder-avatar" id="user-initial"></span>
<span id="user-first-name"></span>
</button>
<div class="user-dropdown" id="user-dropdown">
<div class="user-dropdown-header">
<div class="user-dropdown-name" id="dropdown-name"></div>
<div class="user-dropdown-email" id="dropdown-email"></div>
</div>
<div class="user-dropdown-links">
<a href="/dashboard"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>Dashboard</a>
<a href="/monitor"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 01-3.46 0"></path></svg>Monitor</a>
<a href="/subscription"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>Subscription</a>
<a href="/support" id="support-link"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>Support<span id="support-badge" class="support-notification-badge" style="display:none;"></span></a>
<a href="/admin" id="admin-link" style="display:none;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg>Admin Panel</a>
<a href="/settings"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>Settings</a>
<form action="/auth/logout" method="POST" style="margin: 0;" onsubmit="localStorage.removeItem('domscan_auth')">
<button type="submit" class="logout-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>Sign Out</button>
</form>
</div>
</div>
</div>
</div>
</nav>
<a href="/login" class="btn-signup-mobile" id="signup-mobile-btn" style="display:none;">Sign Up Free</a>
<a href="/dashboard" class="btn-dashboard-mobile" id="dashboard-mobile-btn" style="display:none;">Dashboard</a>
</div>
MCP Server for Domain Availability
Check domain availability directly in your AI assistant. Works with Claude, ChatGPT, Cursor, and any MCP-compatible tool.
<h2 style="text-align: center; margin: 2rem 0 1rem;">Choose Your AI Platform</h2>
<div class="platform-grid">
<a href="#claude" class="platform-card" style="text-decoration: none;">
<div class="icon">🤖</div>
<h3>Claude Desktop</h3>
<p>Anthropic's AI assistant</p>
</a>
<a href="#chatgpt" class="platform-card" style="text-decoration: none;">
<div class="icon">💬</div>
<h3>ChatGPT</h3>
<p>OpenAI's ChatGPT Plus/Pro</p>
</a>
<a href="#cursor" class="platform-card" style="text-decoration: none;">
<div class="icon">⌨️</div>
<h3>Cursor IDE</h3>
<p>AI-powered code editor</p>
</a>
</div>
<!-- Authentication Section -->
<div class="setup-section" id="auth">
<h2><span class="icon">🔑</span> Authentication (Recommended)</h2>
<p>DomScan MCP works without an API key, but we recommend adding one to unlock the full experience.</p>
<ul style="margin: 1rem 0; padding-left: 1.5rem; color: #475569;">
<li>Track your usage across tools and sessions</li>
<li>Higher rate limits for heavy usage</li>
<li>Use your purchased credit balance</li>
</ul>
<p style="margin-top: 1rem; font-weight: 600; color: #0f172a;">Add your API key to the MCP URL:</p>
<div class="config-block">https://domscan.net/mcp?api_key=<span class="string">dsk_your_key_here</span></div>
<div style="margin-top: 1.25rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
<a href="/login" style="display: inline-block; background: linear-gradient(135deg, #f97316, #ea580c); color: white; padding: 0.75rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 700;">Get your free API key</a>
<span style="color: #64748b; font-size: 0.9rem;">Sign up to get 10,000 free credits per month.</span>
</div>
<div class="tip-box" style="margin-top: 1.25rem;">
<strong>Tip:</strong> Your API key is transmitted securely over HTTPS. Never share your key publicly.
</div>
</div>
<!-- Claude Desktop Setup -->
<div class="setup-section" id="claude">
<h2><span class="icon">🤖</span> Claude Desktop Setup</h2>
<p>Connect DomScan to Claude Desktop using the MCP configuration file.</p>
<div class="step">
<div class="step-number">1</div>
<div class="step-content">
<h4>Open the configuration file</h4>
<p>Find your Claude Desktop config file at:</p>
<div class="menu-path">
<strong>macOS:</strong> ~/Library/Application Support/Claude/claude_desktop_config.json
</div>
<div class="menu-path">
<strong>Windows:</strong> %APPDATA%\Claude\claude_desktop_config.json
</div>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-content">
<h4>Add the DomScan MCP server</h4>
<p>Add this configuration to your mcpServers section:</p>
<p style="margin: 0.75rem 0 0.25rem; font-weight: 600; color: #0f172a; font-size: 0.9rem;">With API key (recommended):</p>
<div class="config-block">
{ "mcpServers": { "domscan": { "command": "npx", "args": ["mcp-remote", "https://domscan.net/mcp?api_key=dsk_your_key_here"] } } }
Without API key (free tier):
<div class="step">
<div class="step-number">3</div>
<div class="step-content">
<h4>Restart Claude Desktop</h4>
<p>Completely quit and relaunch Claude Desktop to load the new MCP server.</p>
</div>
</div>
<div class="step">
<div class="step-number">4</div>
<div class="step-content">
<h4>Start checking domains!</h4>
<p>Ask Claude: "Is mycompany.com available?" or "Check startup across .com, .io, and .dev"</p>
</div>
</div>
<div class="tip-box">
<strong>Tip:</strong> You need Node.js installed for the npx command to work. Download it from <a href="https://nodejs.org" target="_blank">nodejs.org</a> if you don't have it.
</div>
</div>
<!-- ChatGPT Setup -->
<div class="setup-section" id="chatgpt">
<h2><span class="icon">💬</span> ChatGPT Setup</h2>
<p>Connect DomScan to ChatGPT using Connectors (requires ChatGPT Plus or Pro).</p>
<div class="step">
<div class="step-number">1</div>
<div class="step-content">
<h4>Enable Developer Mode</h4>
<p>Go to ChatGPT Settings:</p>
<div class="menu-path">
Settings → Connectors → Advanced → Enable Developer Mode
</div>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-content">
<h4>Create a new Connector</h4>
<p>In the Connectors section, click "Create" to add a new connector:</p>
<div class="menu-path">
Settings → Connectors → Create
</div>
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-content">
<h4>Configure the connector</h4>
<p>Enter these details:</p>
<ul style="margin: 0.5rem 0; padding-left: 1.5rem; color: #475569;">
<li><strong>Name:</strong> DomScan</li>
<li><strong>Description:</strong> Domain availability checker</li>
<li><strong>URL:</strong> https://domscan.net/mcp?api_key=<span style="color: #f97316;">dsk_your_key_here</span></li>
<li><strong>Authentication:</strong> None (start free with 10,000 credits/month)</li>
</ul>
</div>
</div>
<div class="step">
<div class="step-number">4</div>
<div class="step-content">
<h4>Start a new chat</h4>
<p>In a new conversation, ChatGPT will have access to DomScan's domain checking tools.</p>
</div>
</div>
<div class="warning-box">
<strong>Note:</strong> ChatGPT's MCP support is in beta. Developer Mode is available to Plus/Pro users. The experience may vary as OpenAI continues to develop this feature.
</div>
</div>
<!-- Cursor IDE Setup -->
<div class="setup-section" id="cursor">
<h2><span class="icon">⌨️</span> Cursor IDE Setup</h2>
<p>Add DomScan to Cursor for domain checking while coding.</p>
<div class="step">
<div class="step-number">1</div>
<div class="step-content">
<h4>Open MCP Settings</h4>
<p>Access Cursor's MCP configuration:</p>
<div class="menu-path">
<strong>Keyboard:</strong> Cmd+Shift+J (Mac) / Ctrl+Shift+J (Windows)
</div>
<div class="menu-path">
<strong>Menu:</strong> File → Preferences → Cursor Settings → Features → MCP
</div>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-content">
<h4>Create the config file</h4>
<p>Create or edit the MCP configuration file:</p>
<div class="menu-path">
<strong>Global:</strong> ~/.cursor/mcp.json
</div>
<div class="menu-path">
<strong>Project:</strong> .cursor/mcp.json (in your project root)
</div>
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-content">
<h4>Add DomScan configuration</h4>
<p>Add this to your mcp.json file:</p>
<p style="margin: 0.75rem 0 0.25rem; font-weight: 600; color: #0f172a; font-size: 0.9rem;">With API key (recommended):</p>
<div class="config-block">
{ "mcpServers": { "domscan": { "url": "https://domscan.net/mcp?api_key=dsk_your_key_here" } } }
Without API key (free tier):
<div class="step">
<div class="step-number">4</div>
<div class="step-content">
<h4>Use in Composer</h4>
<p>Open Cursor's Composer (Cmd+K) and ask about domain availability. The agent will automatically use DomScan when relevant.</p>
</div>
</div>
<div class="tip-box">
<strong>Tip:</strong> Check MCP logs with Cmd+Shift+U and select "MCP Logs" to debug any connection issues.
</div>
</div>
<!-- Other Tools -->
<div class="setup-section" id="other">
<h2><span class="icon">🔌</span> Other MCP-Compatible Tools</h2>
<p>Any tool that supports MCP Streamable HTTP transport can connect to DomScan.</p>
<div class="config-block">
# MCP Endpoint (Streamable HTTP) https://domscan.net/mcp?api_key=dsk_your_key_here
# Add your API key for authentication # 10,000 free credits per month # CORS enabled for browser-based tools
<p style="margin-top: 1rem;">Compatible with: <strong>Windsurf</strong>, <strong>Continue.dev</strong>, <strong>Cody</strong>, and any MCP client that supports HTTP transport.</p>
</div>
<!-- Available Tools -->
<div class="setup-section">
<h2><span class="icon">🛠️</span> Available MCP Tools (30+) (30+)</h2>
<p>DomScan provides comprehensive domain intelligence tools for your AI:</p>
<h3 style="margin: 1.5rem 0 1rem; color: #0f172a; font-size: 1.1rem;">Domain Availability</h3>
<div class="tools-grid">
<div class="tool-card">
<h4>get_status</h4>
<p>Check domain availability across multiple TLDs at once.</p>
</div>
<div class="tool-card">
<h4>bulk_status</h4>
<p>Check up to 50 complete domain names in a single request.</p>
</div>
<div class="tool-card">
<h4>suggest_domains</h4>
<p>Generate available domain suggestions from keywords.</p>
</div>
</div>
<h3 style="margin: 1.5rem 0 1rem; color: #0f172a; font-size: 1.1rem;">Domain Intelligence</h3>
<div class="tools-grid">
<div class="tool-card">
<h4>whois_lookup</h4>
<p>Get RDAP/WHOIS registration data, dates, nameservers.</p>
</div>
<div class="tool-card">
<h4>domain_valuation</h4>
<p>Estimate market value based on length, keywords, TLD.</p>
</div>
<div class="tool-card">
<h4>domain_reputation</h4>
<p>Calculate trust score based on DNS, SSL, web presence.</p>
</div>
<div class="tool-card">
<h4>compare_domains</h4>
<p>Side-by-side comparison with recommendations.</p>
</div>
<div class="tool-card">
<h4>domain_health</h4>
<p>Comprehensive health check: DNS, SSL, redirects, server.</p>
</div>
<div class="tool-card">
<h4>tech_stack</h4>
<p>Detect CMS, frameworks, analytics, and hosting.</p>
</div>
</div>
<h3 style="margin: 1.5rem 0 1rem; color: #0f172a; font-size: 1.1rem;">DNS & Security</h3>
<div class="tools-grid">
<div class="tool-card">
<h4>dns_lookup</h4>
<p>Query A, AAAA, MX, TXT, NS, CNAME, and more records.</p>
</div>
<div class="tool-card">
<h4>dns_security</h4>
<p>Check SPF, DKIM, DMARC, DNSSEC, and CAA records.</p>
</div>
<div class="tool-card">
<h4>dns_propagation</h4>
<p>Check DNS propagation across global servers.</p>
</div>
<div class="tool-card">
<h4>email_security</h4>
<p>Analyze email authentication configuration.</p>
</div>
</div>
<h3 style="margin: 1.5rem 0 1rem; color: #0f172a; font-size: 1.1rem;">OSINT & Discovery</h3>
<div class="tools-grid">
<div class="tool-card">
<h4>enumerate_subdomains</h4>
<p>Discover subdomains via Certificate Transparency.</p>
</div>
<div class="tool-card">
<h4>search_certificates</h4>
<p>Search CT logs for SSL certificates.</p>
</div>
<div class="tool-card">
<h4>reverse_ns_lookup</h4>
<p>Find domains sharing a nameserver.</p>
</div>
<div class="tool-card">
<h4>reverse_mx_lookup</h4>
<p>Find domains using a mail server.</p>
</div>
<div class="tool-card">
<h4>reverse_ip_lookup</h4>
<p>Find domains hosted on an IP address.</p>
</div>
<div class="tool-card">
<h4>domain_graph</h4>
<p>Build relationship graphs between domains.</p>
</div>
</div>
<h3 style="margin: 1.5rem 0 1rem; color: #0f172a; font-size: 1.1rem;">Brand Protection</h3>
<div class="tools-grid">
<div class="tool-card">
<h4>typosquatting_check</h4>
<p>Detect potential typosquat domains.</p>
</div>
<div class="tool-card">
<h4>protection_score</h4>
<p>Calculate vulnerability to typosquatting attacks.</p>
</div>
<div class="tool-card">
<h4>social_handles</h4>
<p>Check username availability across platforms.</p>
</div>
</div>
<h3 style="margin: 1.5rem 0 1rem; color: #0f172a; font-size: 1.1rem;">Network & Info</h3>
<div class="tools-grid">
<div class="tool-card">
<h4>ip_lookup</h4>
<p>Get IP geolocation, ASN, and network info.</p>
</div>
<div class="tool-card">
<h4>company_lookup</h4>
<p>Extract company info from domain metadata.</p>
</div>
<div class="tool-card">
<h4>lookup_mac</h4>
<p>Get MAC address vendor/OUI information.</p>
</div>
</div>
</div>
<!-- Example Queries -->
<div class="examples-section">
<h3>Example Queries</h3>
<p>Once connected, try asking your AI:</p>
<div class="example-item">
<div class="query">"Is acmecorp.com available?"</div>
<div class="result">→ Quick domain availability check</div>
</div>
<div class="example-item">
<div class="query">"Check mybrand across .com, .io, .dev, and .co"</div>
<div class="result">→ Checks multiple TLDs for the same name</div>
</div>
<div class="example-item">
<div class="query">"Find available domains for a startup called 'quantum'"</div>
<div class="result">→ Generate and check domain suggestions</div>
</div>
<div class="example-item">
<div class="query">"What's the estimated value of startup.io?"</div>
<div class="result">→ Domain valuation with brandability scores</div>
</div>
<div class="example-item">
<div class="query">"Check all DNS records for example.com"</div>
<div class="result">→ Full DNS lookup including MX, TXT, NS records</div>
</div>
<div class="example-item">
<div class="query">"Is the email security configured correctly for acme.com?"</div>
<div class="result">→ SPF, DKIM, and DMARC analysis</div>
</div>
<div class="example-item">
<div class="query">"Find all subdomains of example.com"</div>
<div class="result">→ Certificate Transparency subdomain enumeration</div>
</div>
<div class="example-item">
<div class="query">"What domains share the same nameserver as example.com?"</div>
<div class="result">→ Reverse NS lookup for related domains</div>
</div>
<div class="example-item">
<div class="query">"Check if there are typosquatting domains targeting google.com"</div>
<div class="result">→ Typosquatting detection and analysis</div>
</div>
<div class="example-item">
<div class="query">"What tech stack does stripe.com use?"</div>
<div class="result">→ Technology detection: CMS, frameworks, CDN</div>
</div>
</div>
<!-- CTA -->
<div class="cta-section">
<h3>Start for Free</h3>
<p>Get 10,000 free credits per month. No credit card required.</p>
<a href="/docs" class="cta-btn">View documentation →</a>
</div>
Server Config
{
"mcpServers": {
"domscan": {
"url": "https://domscan.net/mcp"
}
}
}